<template>
  <div class="register">
    <div class="border"></div>
    <div class="content">
      <div class="title">完成注册</div>
      <div class="form">
        <Input type="text" :errors="errors" :value.sync="username" placeholder="请输入用户名" class-name="email" errors-key="username"/>
        <Input type="password" :errors="errors" :value.sync="password1" placeholder="请输入密码" row-class-name="password1" errors-key="password2"/>
        <Input type="password" :errors="errors" :value.sync="password2" placeholder="请再次输入密码" row-class-name="password2" class-name="password2" errors-key="password2"/>
        <div style="font-size: 0">
          <Input :errors="errors" :value.sync="icaptcha" placeholder="请输入验证码" class-name="captcha" errors-key="captcha_code">
            <img slot="right" :src="captcha.image_base" alt="验证码" @click="get_captcha">
          </Input>
        </div>
        <button class="submit" @click="bind">提交</button>
      </div>
    </div>
    <div
      style="height: 35px;line-height: 35px;background: #F2F7FF;border-radius: 4px;padding: 0 40px;">
      <span style="float: left;font-size: 12px;color: #7586A6;">©{{ new Date().getFullYear() }} J0hNs0N</span>
      <span style="float: right;">
            <a href="https://gitee.com/J0hNs0N/FlawPlatform" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 3px;" rel="noopener">
                <img src="https://gitee.com/assets/favicon.ico" style="height: 16px;width: 16px;">
            </a>
            <a href="https://forum.butian.net/people/4602/community" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 1px;" rel="noopener">
                <img src="https://forum.butian.net/ico.png" style="height: 20px;width: 20px;">
            </a>
            <a href="https://space.bilibili.com/274407612" target="_blank"
               style="float: left;margin-right: 9px;margin-top: 3px;" rel="noopener">
                <img src="https://www.bilibili.com/favicon.ico?v=1"
                     style="height: 16px;width: 16px;">
            </a>
        </span>
    </div>
  </div>
</template>

<script>
import Input from '../components/Input';

export default {
  name: 'Bind',
  components: {
    Input
  },
  data() {
    return {
      email: '',
      icaptcha: '',
      username: '',
      password1: '',
      password2: '',
      captcha: {
        id: 0,
        image_base: ''
      },
      errors: {}
    };
  },
  created() {
    this.get_captcha();
  },
  methods: {
    get_captcha() {
      this.$request.exec('get', 'get_captcha', null, this)
        .then((res) => {
          this.captcha = res.data;
        })
        .catch((res) => {
          this.$message.error(res.data.msg);
        });
    },
    bind() {
      if (!this.$route.query.hasOwnProperty('email_token')) {
        this.$router.push('/login')
        this.$message.error('请先获取激活链接！')
        return
      }

      if(this.$route.query.email_token.length <= 0) {
        this.$router.push('/login')
        this.$message.error('请先获取激活链接！')
        return
      }

      let username = this.username.trim();
      let password1 = this.password1.trim();
      let password2 = this.password2.trim();
      let icaptcha = this.icaptcha.trim();

      // 简单判断是否为空, 节省请求资源
      if (username === '' || username <= 0 || icaptcha === '' || icaptcha <= 0 || password1 === '' || password1<= 0 || password2 === '' || password2 <= 0) {
        // Message.
        this.$message.error('请完成输入。');
        return false;
      }

      this.$request.exec('post', 'bind_email', {
        key: this.$route.query.email_token,
        username: username,
        password1: password1,
        password2: password2,
        image_id: this.captcha.id,
        captcha_code: icaptcha,
      }, this, true).then((res) => {
        this.$message.success(res.msg);
        this.$router.push('/login')
      }).catch((res) => {
        this.$message.error(res.data.msg);
      })
    }
  }
};
</script>

<style scoped>
.register {
  width: 630px;
  min-width: 630px;
  background: #FFFFFF;
  box-shadow: 0px 3px 13px 0px rgba(71, 120, 199, 0.2);
  border-radius: 4px;
  /*position: absolute;*/
  /*top: 5vw;*/
  /*left: 50%;*/
  /*transform: translateX(-50%);*/
  margin: 7vw auto;
}

.border {
  height: .3vw;
  background: #4778C7;
  border-radius: 4px;
}

.register * {
  vertical-align: middle;
}

.content {
  padding: 0 40px;
}

.title {
  font-size: 17px;
  color: #163366;
  line-height: 32px;
  margin: 40px 0 10px 0;
}

.form {
  font-size: 14px;
  color: #7586A6;
  line-height: 30px;
  margin-bottom: 54px;
}

.input {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
  font-size: 14px !important;
}

.input:hover {
  border-color: #C0C4CC;
}

input::-webkit-input-placeholder {
  color: #7586A6;
  font-size: 13px;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #7586A6;
  font-size: 13px;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #7586A6;
  font-size: 13px;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7586A6;
  font-size: 13px;
}

.submit {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  margin-top: 35px;
}

.submit:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

.password1 {
  margin: 15px 0;
}

.password2 {
  margin-bottom: 15px;
}

input.input.captcha {
  width: 150px;
  margin-right: 15px;
}

button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  width: 100%;
}

img {
  user-select: none;
  cursor: pointer;
}
</style>
